<template>
  <div>
    <f-table ref="table" rowKey="paymentId" size="small" :showSetting="true" setting-key='sb2'  :tableColumns="columns"  :multiple="false" :scroll="scroll" :params="queryParam" :api="api.payment" handler="supplierBondYesPageListHandler">
         <span slot="paymentState" slot-scope="text, record, index">
            <a-tag color="#87d068" v-if="text==0">未提交</a-tag>
             <a-tag color="#87d068" v-if="text==1" @click="processImg(record)">{{record.taskName}}</a-tag>
            <a-tag color="#f50" v-if="text==2" @click="processImg(record)">已垫付</a-tag>
        </span>
      <span slot="supplierBondType" slot-scope="text, record, index">
            <a-tag color="#2db7f5" v-if="text==0">不垫付</a-tag>
            <a-tag color="purple" v-if="text==1">底价</a-tag>
            <a-tag color="purple" v-if="text==2">底价+税金</a-tag>
            <a-tag color="purple" v-if="text==3">税金</a-tag>
            <a-tag color="purple" v-if="text==6">底价/2+税金</a-tag>
            <a-tag color="purple" v-if="text==5">全额垫付</a-tag>
            <a-tag color="purple" v-if="text==8">销售金额*费率</a-tag>
        </span>
      <span slot="customBondType" slot-scope="text, record, index">
           <a-tag color="#2db7f5" v-if="text==0">全款</a-tag>
            <a-tag color="purple" v-if="text==1">底价</a-tag>
            <a-tag color="purple" v-if="text==2">底价+税金</a-tag>
            <a-tag color="purple" v-if="text==6">底价/2+税金</a-tag>
            <a-tag color="purple" v-if="text==3">税金</a-tag>
            <a-tag color="purple" v-if="text==5">全额资信</a-tag>
            <a-tag color="purple" v-if="text==7">预付款</a-tag>
        </span>
      <span slot="action" slot-scope="text, record">
          <template>
            <a @click="startProcess(record)" v-if="record.paymentState==0">提交审批</a>
            <a @click="completeTask(record)" v-if="record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__'">提交审批</a>
            <a-divider type="vertical" v-if="record.paymentState==0||(record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__')"/>
            <a @click="$refs.orderInfoDrawer.showDrawer(record)" >查看</a>
            <a-divider type="vertical"/>
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
                <a-menu-item v-if="record.paymentState!=0">
                <a href="javascript:;" @click="processImg(record)">审批进度</a>
              </a-menu-item>
                <a-menu-item v-if='record.companyId==4 &&  record.taskName=="出纳支付"'>
                <a href='javascript:;' @click='printPayment(record)'>资金支付单</a>
              </a-menu-item>
              <a-menu-item v-if='record.companyId!=4'>
                <a href='javascript:;' @click='printPayment(record)'>资金支付单</a>
              </a-menu-item>
              <a-menu-item v-if="record.paymentState==0">
                <a href="javascript:;" @click="$refs.table.del(record,{handlerName:'supplierBondPaymentDeleteHandler'})">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
    </f-table>
    <order-info-drawer ref="orderInfoDrawer"></order-info-drawer>
    <process-image ref="processImg" v-if="processImageVisible" :visible.sync="processImageVisible" :processInstanceId="processInstanceId"></process-image>
    <print-modal ref="printModal"></print-modal>
  </div>
</template>
<script>

  import api from './../js/api'
  import OrderInfoDrawer from '../../../business/order/order_info_drawer'
  import ProcessImage from '../../../flowable/process/process_image'
  import PrintModal from '../print/print_modal'

  export default {
    name: 'SupplierBondYes',
    components: {
      PrintModal,
      OrderInfoDrawer,
      ProcessImage
    },
    data() {
      let me = this
      //操作按钮
      let operator = []
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {paymentState: 1},
        processImageVisible: false,
        scroll: { x: true },
        // 表头
        columns: [
          {
            title: '#',
            width: '50px',
            fixed: 'left',
            align: 'left',
            customRender: (text, record, index) => index + 1
          },
          {
            title: '操作',
            align: 'center',
            fixed: 'left',
            width: '180px',
            scopedSlots: { customRender: 'action' }
          },
          {
            title: '单号',
            align: 'left',
            fixed: 'left',
            width: '155px',
            dataIndex: 'paymentNo'
          },
          {
            title: '发货日期',
            align: 'left',
            width: '140px',
            dataIndex: 'sendDate'
          },
          {
            title: '部门',
            align: 'left',
            width: '100px',
            dataIndex: 'deptName'
          },
          {
            title: '供货方',
            align: 'left',
            width: '190px',
            ellipsis: true,
            dataIndex: 'supplierName'
          },
          {
            title: '供方资信',
            align: 'left',
            width: '100px',
            dataIndex: 'supplierBondType',
            scopedSlots: { customRender: 'supplierBondType' }
          },
          {
            title: '购货方',
            align: 'left',
            ellipsis: true,
            width: '190px',
            dataIndex: 'customName'
          },
          {
            title: '购方资信',
            align: 'left',
            width: '100px',
            dataIndex: 'customBondType',
            scopedSlots: { customRender: 'customBondType' }
          },
          {
            title: '垫付款',
            align: 'left',
            width: '100px',
            dataIndex: 'amount'
          },
          {
            title: '收款银行',
            align: 'left',
            width: '180px',
            ellipsis: true,
            dataIndex: 'bankName'
          },
          {
            title: '收款账户',
            align: 'left',
            width: '180px',
            dataIndex: 'bankNo'
          },
          {
            title: '制单人',
            align: 'left',
            width: '140px',
            dataIndex: 'nickName'
          },
          {
            title: '创建日期',
            align: 'left',
            sorter: true,
            width: '160px',
            dataIndex: 'createTime'
          },
          {
            title: '支付人',
            align: 'left',
            width: '130px',
            dataIndex: 'payUserName'
          },
          {
            title: '支付日期',
            align: 'left',
            width: '140px',
            dataIndex: 'payDate'
          },
          {
            title: '审批状态',
            align: 'left',
            fixed: 'right',
            width: '130px',
            dataIndex: 'paymentState',
            scopedSlots: { customRender: 'paymentState' }
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    methods: {
      processImg(order) {
        this.processInstanceId = order.processInstanceId
        this.processImageVisible = true
      },
      //重新提交
      completeTask(paymentId) {
        this.http.confirm(this, {
          content: '确认提交审批吗?',
          url: api.tasktodo.complete,
          requestBody: true,
          data: {
            taskId: paymentId.taskId
          },
          success: function(me, data) {
            me.$refs.table.refresh()
          }
        })
      },
      startProcess(order) {
        this.http.confirm(this, {
          content: '确认提交审批吗?',
          url: api.processInstance.start,
          requestBody: true,
          data: {
            handlerName: 'paymentPayStartProcessHandler',
            businessKey: order.paymentId
          },
          success: function(me, data) {
            me.$refs.table.refresh()
          }
        })
      },
      printPayment(record){
        this.$refs['printModal'].open(record.paymentId,2,'SupplierBond')
      },
      onLoad() {
        this.$refs.table.refresh()
      }
    }
  }
</script>
